import React, { useState } from 'react'
import { DropdownMenu } from 'react-vant'
import { DropdownMenuItemOption } from 'react-vant/es/dropdown-menu/PropsType'
import './Dropdown.scss'
import { Success } from '@react-vant/icons';

export type setDownVo = Record<string, string | number>
export type GetActiveValue = (params: setDownVo) => void

interface DropdownProps {
  dropdownOption: DropdownMenuItemOption[],
  activeValue: setDownVo,
  getActiveValue: GetActiveValue
}
const ActiveIcon: React.FC = () => {
  return <Success color="#417CE8" />
}
const Dropdown: React.FC<DropdownProps> = (props) => {
  const { dropdownOption: downOption, getActiveValue, activeValue } = props
  const [downVal, setDownVal] = useState<setDownVo>(activeValue)
  const handleSetdDownVal = (v: setDownVo) => {
    setDownVal(v)
    getActiveValue(v)
  }

  return (
    <DropdownMenu activeColor='#417CE8' activeIcon={<ActiveIcon />} direction='up' value={downVal} onChange={v => handleSetdDownVal(v)} disabled>
      <DropdownMenu.Item name='name' options={downOption} />
    </DropdownMenu>
  )
}

export default Dropdown